<template>
  <div class="sort">
    <ul>
      <li
        v-for="(item, index) in nav_lists"
        :key="index"
        @mouseenter="enter(index)"
        @mouseleave="leave()"
      >
        <a v-for="(item1, index1) in item" :key="item1.name" :href="item1.path">
          <span class="a_text">{{ item1.name }}</span>
          <span id="line" v-if="item.length != 1 && index1 != item.length - 1"
            >/</span
          >
        </a>
      </li>
    </ul>

    <div
      class="navText"
      v-show="flag && index2 == current"
      @mouseover="mouseover(index2)"
      @mouseleave="leave"
    >
      <div class="left">
        <div class="channel">
          <Item
            :lists="navItems.channel"
            :padding="5 + 'px' + ' ' + 8 + 'px'"
            :background="'black'"
            :color="'#fff'"
            :ulDisplay="'inline-block'"
          ></Item>
        </div>
        <div class="detail">
          <div class="detailLeft">
            <Item :lists="navItems.detail.tit" :padding="10 + 'px'"></Item>
          </div>
          <div class="detailRight">
            <Item
              v-for="item in navItems.detail.con"
              :key="item.name"
              :lists="item"
              :ulDisplay="'inline-block'"
              :padding="10 + 'px' + ' ' + 0 + 'px'"
            ></Item>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="brand">
          <imgList
            class="brandImg"
            :list="navItems.brand"
            :width="83"
            :height="53"
          ></imgList>
        </div>
        <div class="promotion">
          <imgList
            class="promotionImg"
            :list="navItems.promotion"
            :height="153"
          ></imgList>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Item from "@/components/Item.vue";
import imgList from "@/components/imgList.vue";
export default {
  name: "sort",
  components: {
    Item,
    imgList,
  },
  props: {
    nav_lists: [],
    nav_items: [],
  },
  data() {
    return {
      flag: false,
      current: 0,
      index2: null,
      navItems: this.nav_items[0],
    };
  },
  created() {
    console.log(this.nav_items[1]);
  },
  methods: {
    enter(e) {
      this.flag = true;
      this.current = e;
      this.index2 = e;
      this.navItems = this.nav_items[e];
      console.log(this.navItems);
      console.log(this.current);
    },
    leave() {
      this.flag = false;
      this.current = null;
    },
    mouseover(e) {
      this.flag = true;
      this.current = e;
      this.index2 = e;
    },
  },
};
</script>
<style scoped>
ul {
  overflow: hidden;
  padding: 10px 0;
  height: 450px;
  color: #636363;
}
li {
  padding: 0 18px;
  overflow: hidden;
  height: 25px;
  /* line-height: 25px; */
}
.a_text {
  font-size: 14px;
}
#line {
  margin: 0 5px;
}
li:hover {
  background: #ccc;
}
.a_text:hover {
  color: red;
}
/* 隐藏框 */
.navText {
  position: relative;
  left: 200px;
  top: -471px;
  width: 910px;
  min-height: 480px;
  z-index: 11;
  background: #fff;
  border: 1px solid #ccc;
  overflow: hidden;
  padding-bottom: 10px;
}
.navText .left {
  width: 700px;
  height: 100%;
  float: left;
  z-index: 11;
}
.navText .right {
  width: 210px;
  float: right;
  padding-top: 20px;
}
/* 清除浮动 */
.navText .left::after,
.navText .right::after {
  content: "";
  clear: both;
}
.channel {
  overflow: hidden;
  padding-left: 20px;
  padding-top: 5px;
}
.detail {
  overflow: hidden;
  padding-top: 25px;
}
.detailLeft {
  float: left;
  margin-left: 35px;
}
.detailRight {
  float: left;
  margin-left: 20px;
}
.brand {
  width: 180px;
  margin: auto;
}
.brandImg {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-content: space-around;
  height: 170px;
}
.promotion {
  width: 180px;
  margin: 10px auto 0;
  overflow: hidden;
}
</style>